<template>
	<view class="container" style="margin: 0 15px;">
		
		<view class="fb-mobile" style="margin-bottom: 10rpx;">
			<view class="label">选择维修人员</view>
			<view class="mobile-box" style="display: flex; align-items: center;">
				<zqs-select style="height: 100%;width: 100%; display: flex; align-items: center;" 
					:multiple="true"
					:list="options"
					label-key="label" 
					value-key="value" 
					clearable 
					:showSearch="true" 
					placeholder=" 选择维修人员" 
					title="选择维修人员" 
					@search="searchEvent3"
					@change="selectChange2"
					v-model="checkUserList">
				</zqs-select>
				<tui-icon name="arrowdown" size="18"></tui-icon>
			</view>
		</view>
		
		<view class="fb-body">
			<textarea class="content" placeholder="请描述您要保修的内容..." @input="contentInput" :maxlength="500"
				:auto-focus="true" v-model="content" />
			<!-- #ifndef MP-ALIPAY -->
			<view class="text-count">{{contentLength}}/500</view>
			<!-- #endif -->
		</view>
		
		<view class="fb-mobile">
			<view class="label">所属小区</view>
			<view class="mobile-box" style="display: flex; align-items: center;">
				<zqs-select style="height: 100%;width: 100%; display: flex; align-items: center;" 
					:list="allRoomList"
					label-key="label" value-key="id" 
					clearable 
					:showSearch="true" 
					@search="searchEvent"
					@change="selectChange2" 
					placeholder=" 请选择小区" 
					title="请选择小区" 
					v-model="uptownId">
				</zqs-select>
				<tui-icon name="arrowdown" size="18"></tui-icon>
			</view>
		</view>
		
		<view class="fb-mobile" >
			<view class="label">请选择或者填写报修地址</view>
			<view class="mobile-box" style="display: flex; align-items: center;">
				<zqs-select style="height: 100%;width: 100%; display: flex; align-items: center;" 
					:list="roomList"
					label-key="roomId" 
					value-key="roomId" 
					clearable 
					:showSearch="false" 
					placeholder=" 请选择报修地址"
					title="请选择报修地址" 
					@change="selectChange3" 
					v-model="repairPlace"></zqs-select>
				<tui-icon name="arrowdown" size="18"></tui-icon>
			</view>
		</view>
		<view class="fb-mobile" >
			<!-- <view class="label" style="height: 1rpx;"></view> -->
			<view class="mobile-box" style="border-top: 1px solid #eaeef1;">
				<input class="mobile" placeholder="请输入报修地址" v-model="repairPlace2" @input="hanldInput" />
			</view>
		</view>
		<view class="fb-mobile">
			<view class="label">报修人</view>
			<view class="mobile-box">
				<input class="mobile" placeholder="方便我们与你联系" v-model="userName" />
			</view>
		</view>
		<view class="fb-mobile" >
			<view class="label">手机号码</view>
			<view class="mobile-box">
				<input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" v-model="mobile" />
			</view>
		</view>
		<view class="pic-box" style="background: #fff;border-top: 1px solid #eaeef1;">
			<view class="pic-item" v-for="(item, index) in picTempleList" :key="index">
				<image :src="item.url" @tap="previewPic" :data-urls="item.url"></image>
				<text class="pic-delete" @tap="handleDelete" :data-src="item" :data-goods-index="index">x</text>
			</view>
			<view class="pic-item pic-handle" @tap="chooseImageTap" :data-goods-index="num">
				<tui-icon name="camera"></tui-icon>
				<text class="desc">添加图片</text>
			</view>
		</view>
		<tui-button style="margin-top: 10px;" type="danger" @click="sbmitFeedback">提交</tui-button>
	</view>
</template>

<script>
	import zqsSelect from '@/components/zqs-select/zqs-select.vue'
	const util = require("@/utils/util.js")
	export default {
		components: {
			zqsSelect
		},
		data() {
			return {
				array: ['请选择反馈类型', '商品相关', '物流状况', '客户服务', '优惠活动', '功能异常', '产品建议', '其他'],
				feedType: 0,
				content: '',
				contentLength: 0,
				mobile: '',
				userName: '',
				repairId: '',
				repairPlace: '',
				repairPlace2: '',
				picTempleList: [],
				roomList: [],			//已经绑定的小区列表
				allRoomList: [],		//所有小区列表
				uptownId: '',			//小区ID
				currentRoom: {},
				checkUserList: [],
				options: []
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				// this.userName = userInfo.nickname;
				// this.mobile = userInfo.mobile;
			}
			this.getId();
			this.selectRoomListByOpenId();
			this.uptownList();
			this.userList();
		},
		methods: {
			
			/**
			 * 小区列表
			 */
			uptownList: function(e) {
				let that = this;
				util.request("system/wx/uptownList").then(function(res) {
					that.allRoomList = res.data;
				});
			},
			
			userList: function(e) {
				let that = this;
				let userInfo = wx.getStorageSync("userInfo");
				let users = [];
				let url = "user/userList";
				util.request(url,{
					deptId: userInfo.deptId
				}).then(function(res) {
					if (res.code === 200) {
						res.data.forEach(element => {
							users.push({ 
								label: element.label,
								value: element.label
							});
						});
						that.options = users;
					}
				})
			},
			
			searchEvent3(val) {
				console.log('查询事件参数', val)
				// 此处把新的请求值 赋值给options
				if (!val) {
					this.userList();
				} else {
					let newroom = this.options.filter(item => {
						console.log(item.label)
						return item.label.toLowerCase().includes(val.toLowerCase());
					})
					this.options = newroom;
				}
			},
			
			selectChange2(e) {
				this.currentRoom = e;
			},
			
			// 如果选择房间号就清空手写的地址
			selectChange3(e) {
				this.repairPlace2 = '';
			},
			// 如果手写的地址就清空选择房间号
			hanldInput(e){
				this.repairPlace = '';
			},
			
			selectRoomListByOpenId: function(e) {
				var that = this;
				var openId = '';
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					openId = userInfo.openId;
				}
				util.request('system/wx/selectRoomListByOpenId', {
					openId: openId
				}).then(function(res) {
					if (res.code === 200) {
						that.roomList = res.data;
					}
				});
			},
			
			handleDelete(e) {
				console.log("handleDelete..................................");
				let that = this;
				let item = e.currentTarget.dataset.src;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				// const keyVal = e.currentTarget.dataset.value;

				util.request("upload/deleteFile", {
					id: item.id
				}).then(function(res) {
					if (res.code === 200) {
						that.picTempleList.splice(goodsIndex,1);
					}
				});
			},
			
			bindPickerChange: function(e) {
				this.feedType = e.detail.value;
			},
			
			contentInput: function(e) {
				let that = this
				that.contentLength = e.detail.cursor
				that.content = e.detail.value
			},
			
			/**
			 * 获取-报修ID
			 */
			getId: function(e) {
				let that = this;
				util.request('system/wx/getId').then(function(res) {
					if (res.code === 200) {
						that.repairId = res.id;
					}
				})
			},
			
			/**
			 * 提交工单
			 */
			sbmitFeedback: function(e) {
				let that = this;
				let maintenanceMan = '';
				if(that.checkUserList.length >0 ){
					for(let i =0; i< that.checkUserList.length; i++){
						let element = that.checkUserList[i];
						if(i ==0){
							maintenanceMan = element
						}else {
							maintenanceMan = maintenanceMan + ','+ element;
						}
					}
				}else {
					util.toast('请选择报修人员');
					return false;
				}
				
				if (that.content == '') {
					util.toast('请输入反馈内容');
					return false;
				}
				
				if (that.userName == '') {
					util.toast('请输入报修人姓名');
					return false;
				}

				if (!util.isMobile(that.mobile)) {
					util.toast('请输入正确的手机号码');
					return false;
				}
				
				if(that.repairPlace =='' && that.repairPlace2 ==''){
						util.toast('请选择或者输入报修地址');
						return false;
				}
				let userInfo = uni.getStorageSync('userInfo');
				let assignDept = '';
				if (userInfo) {
					assignDept = userInfo.deptId;
				}
				
				util.request('/repair/insertRepair', {
					id: that.repairId,
					telephone: that.mobile,
					userName: that.userName,
					repairContent: that.content,
					repairPlace: that.repairPlace,
					maintenanceMan: maintenanceMan,
				    assignDept: assignDept,
					// uptownId: that.currentRoom.uptownId	 // 小区号
					uptownId: that.uptownId	 // 小区号
				}, 'POST').then(function(res) {
					if (res.code === 200) {
						uni.showModal({
							content: '工单添加成功！',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						})
					}
				});
			},
			
			chooseImageTap: function(e) {

				let that = this;
				let goodsIndex = e.currentTarget.dataset.goodsIndex;
				uni.showActionSheet({
					itemList: ['从相册中选择', '拍照'],
					itemColor: "#ED3B2F",
					success: function(res) {
						if (!res.cancel) {
							if (res.tapIndex == 0) {
								that.chooseWxImage('album', goodsIndex)
							} else if (res.tapIndex == 1) {
								that.chooseWxImage('camera', goodsIndex)
							}
						}
					}
				})
			},
			
			chooseWxImage: function(type, goodsIndex) {
				let _this = this;
				let userToken = uni.getStorageSync('token');
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: [type],
					success: function(res) {
						var tempFilePaths = res.tempFilePaths
						for (const key in tempFilePaths) {
							console.log(tempFilePaths[key])
							// util.uploadFile('upload/uploadForRepair', tempFilePaths[key]).then(function(res){
							// 	_this.goodsList[goodsIndex].pics.push(res.url);
							// })
							uni.uploadFile({
								url: util.interfaceUrl + 'upload/uploadForRepair',
								filePath: tempFilePaths[key],
								name: 'file',
								header: {
									// #ifndef H5
									'content-type': 'multipart/form-data',
									// #endif
									'token': userToken
								},
								formData: {
									repairId: _this.repairId,
									fileType: '0'
								},
								success: function(ress) {
									console.log("====================================");
									console.log(ress);
									console.log("====================================");
									uni.hideLoading();
									let data = JSON.parse(ress.data.replace(/\ufeff/g, "") ||
										"{}")
									console.log(
										"-----------------------------------------------")
									console.log(data);

									console.log(
										"-----------------------------------------------")
									if (data.code == 200) {
										//返回图片地址
										_this.picTempleList.push(data);
										console.log(
											"-------------------------------2----------------"
										)
										console.log(_this.picTempleList);
										console.log(
											"--------------------------------2---------------"
										)
									} else {
										//utils.toast(res.msg);
									}
								},
								fail: function(res) {
									console.log(res);
									//utils.toast("网络不给力，请稍后再试~")
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
		min-height: 100%;
	}

	.container {
		background: #f4f4f4;
		min-height: 100%;
		padding-top: 30rpx;
	}

	.fb-type {
		height: 104rpx;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.fb-type .type-label {
		height: 36rpx;
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.fb-body {
		background: #fff;
		height: 274rpx;
		padding: 18rpx 30rpx 64rpx 30rpx;
	}

	.fb-body .content {
		height: 100%;
		color: #333;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.fb-body .text-count {
		padding-top: 17rpx;
		line-height: 30rpx;
		float: right;
		color: #666;
		font-size: 24rpx;
	}

	.fb-mobile {
		/* height: 162rpx; */
	}

	.fb-mobile .label {
		/* height: 38rpx;
		padding: 30rpx 0 0 30rpx;
		font-size: 24rpx; */
		height: 26rpx;
		font-size: 24rpx;
		padding: 8px 15px;
		background: #fff;
		border-top: 1px solid #eaeef1;
		border-bottom: 1px solid #eaeef1;

	}

	.fb-mobile .mobile-box {
		height: 46rpx;
		color: #333;
		/* padding-left: 30rpx;
		padding-right: 30rpx; */
		padding: 13px 15px;
		font-size: 24rpx;
		background: #fff;
		position: relative;
	}

	.fb-mobile .mobile {
		width: 100%;
		position: absolute;
		top: 27rpx;
		left: 30rpx;
		height: 50rpx;
		color: #333;
		line-height: 50rpx;
		font-size: 24rpx;
	}

	.fb-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.pic-box {
		/* margin-top: 20rpx; */
		font-size: 22rpx;
		padding: 20rpx 20px 20px 10px;
		display: flex;
		flex-wrap: nowrap;
	}

	.pic-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-right: 10px;
		display: inline-block;
	}

	.pic-item image {
		width: 100%;
		height: 100%;
	}

	.pic-item .pic-delete {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		color: #fff;
		line-height: 30rpx;
		top: -15rpx;
		right: -15rpx;
		border-radius: 50%;
		background-color: red;
	}

	.pic-handle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.pic-item.pic-handle image {
		width: 100rpx;
		height: 100rpx;
	}

	.pic-handle .desc {
		padding-top: 10px;
		font-size: 0.9em;
		color: #9b9b9b;
	}

	.btn-box {
		margin: 20px 0;
		padding: 10px 20px;
	}
</style>